﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>在线考试系统登录页面</title>
    <script src="Scripts/jquery-3.3.1.js"></script>
    <!--<script src="layui/layui.all.js"></script>-->
    <script src="myjs/GenerateVerificationCode.js"></script>
    <script src="layui/layui.js"></script>
    <link href="layui/css/layui.css" rel="stylesheet" />
    <link href="mycss/login.css" rel="stylesheet" />
    
    <script>
        $(function () {
            $("#password_img").click(function () {
                var img = $("#password_img");
                var a = 'layui/images/icon/show_password.svg';
                var password = $("#password");
                if (password.attr("type") == "password") {
                    password.attr("type", "text");
                    img.attr("src", "./layui/images/icon/show_password.svg");
                } else {
                    password.attr("type", "password");
                    img.attr('src', 'layui/images/icon/hide_password.svg');

                }

            });
           
            
        });
    </script>

    
</head>
<body>
    <div class="main-body">
        <div class="login-main">
            <!--头部-->
            <div class="login-top">
                <span>在线考试系统</span>
            </div>
        </div>
        <form class="layui-form" action="Default.aspx">
            <div class="layui-form" style="width: 80%; margin: 0 auto;">
                <!--主干部分 -->
                <div class="layui-form-item" style="margin: 20px auto;">
                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-username"></i>
                        <input type="text" id="username" name="username" required lay-verify="required" autocomplete="off" placeholder="用户名" class="layui-input" style="text-align: center;" />
                    </div>

                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-password"></i>
                        <input type="password" id="password" name="password" required  lay-verify="required" autocomplete="off" placeholder="密码" class="layui-input" style="text-align: center;" />
                        <img id="password_img" src="./layui/images/icon/hide_password.svg" style="width: 16px;" />
                    </div>

                    <div class="inputVerify">
                        <div class="inputdiv" style="display: block; width: 150px; float: left; margin-top: 30px;">
                            <input type="text" id="verifycode" name="verifcode" required lay-verify="required" autocomplete="off" placeholder="验证码" class="layui-input" style="text-align: center; display: inline-block;" />
                        </div>
                        <div>
                            <canvas id="canvas" style="display: inline-block; float: right; width: 120px; height: 60%;  margin: 18px 10px;"></canvas>
                        </div>
                    </div>

                </div>
                <div class="tips">
                    <div class="layui-form">
                        <input type="checkbox" name="" title="记住密码" lay-skin="primary" checked />
                        <a  id="test1" style="display: inline-block; width: 80px; height: 100%; float: right;">忘记密码？</a>
                    </div>
                </div>
                <div >
                    <button type="button" lay-submit lay-filter="submitBtn" class="layui-btn layui-btn-radius login-btn" >登 录</button>
                </div>
            </div>
        </form>
        <div class="footer"></div>

    </div>


    <script>
        layui.use(['form','layer'], function () {
            var form = layui.form;

            //监听提交按钮
            form.on('submit(submitBtn)', function (data) {
                alert(JSON.stringify(data.field));
                $.ajax({
                    url: 'login.aspx',
                    methed: 'post',
                    datatype: 'text',
                    data:data.field,
                    success: function (res) {                        
                        if (res == '1') {
                            window.location.replace("teacher/teacherMain.html");
                        }
                        else {
                            layer.alert("密码错误");
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        /*错误信息处理*/
                        alert("进入error---");
                        alert("状态码："+xhr.status);
                        alert("状态:" + xhr.readyState);//当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                        alert("错误信息:"+xhr.statusText );
                        alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                        alert("请求状态："+textStatus); 　　　　　　　　
                        alert(errorThrown); 　　　　　　　　
                        alert("请求失败"); 
                    } 
                });
            });
        });
        
    </script>
    
</body>
</html>
